<template>
	<view class="Global">


		<!-- <image class="imagepage" src="/static/background.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>




		<scroll-view scroll-y="true" class="ContentScroll" :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentScrollInner">

				<view class="listContent" v-for="(item,index) in listData">




					<view class="contentItem" v-if="item.type==0">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">{{item.title}}</text>
							<text class="contentItemTextLeftStart">*</text>
						</view>
						<!-- <input class="contentItemTextRight" type="text" :value="item.Value" /> -->
						<input @input="onInputAccount(index,$event)" class="contentItemTextRight" type="text" value=""
							placeholder-class="title3" placeholder="请输入" />

					</view>


					<view class="contentItem2" v-if="item.type==1">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">{{item.title}}</text>
							<text class="contentItemTextLeftStart">*</text>
						</view>

						<input @input="onInputAccount(index,$event)" class="contentItemTextRight" type="text" value=""
							placeholder-class="title3" placeholder="请输入" />
					</view>



					<view class="contentItem2" v-if="item.type==2" @click="goUrl(item)">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">{{item.title}}</text>
							<text class="contentItemTextLeftStart">*</text>
						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft">{{item.Value}}</text>
							<image class="contentItemRightContentImg" src="/static/gongzuotai/xia_jiantou.png" mode="">
							</image>
						</view>

					</view>

          <view class="contentItem2" v-if="item.type==3" >

            <view class="contentItemTextLeftContent">
              <text class="contentItemTextLeft">{{item.title}}</text>
<!--              <text class="contentItemTextLeftStart">*</text>-->
            </view>

            <view class="contentItemRightContent">
              <text class="contentItemTextLeft">{{item.Value}}</text>
            </view>

          </view>

					<view class="lineBg"></view>
				</view>



				<!-- 选项卡 切换 -->
				<view class="SwitchTabOut">


					<view class="SwitchTabOutInner">

						<view class="head-nav">
							<view :class="navIndex==0?'activite':''" @click="checkIndex(0)">
								<text>工业指导书</text>

							</view>
							<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">
								<text>图片列表</text>

							</view>


						</view>

						<view class="head-nav-line">
							<view class="head-nav-line1" @click="checkIndex(0)">
								<text :class="navIndex==0?'line':''"></text>

							</view>
							<view class="head-nav-line1" @click="checkIndex(1)">
								<text :class="navIndex==1?'line':''"></text>

							</view>


						</view>



						<!-- 内容切换 -->
						<!-- 工业指导书 -->
						<view class="content" v-if="navIndex==0">

							<view class="listDataInnerBottom">
								<text @click="updateData(item)" class="listDataInnerBottomTextBlack">选择工序</text>
								<text class="listDataInnerBottomTextBlack">复制其他款</text>
								<text class="listDataInnerBottomTextRed" @click="removeProcess()">删除</text>
								<text class="listDataInnerBottomTextRed" @click="removeProcessAll()">删除所有</text>
							</view>



							<!-- 按钮操作 -->

							<view class="workList-buttons">


								<view class="workList-buttons_text" @click="selectAllClick()">
									<text class="contentListItemLeftImgText" v-if="selectAll==false"></text>
									<image class="contentListItemLeftImg" v-if="selectAll==true"
										src="../../../static/xuanzhong.png" mode="scaleToFill"></image>
								</view>
								<!--								<text class="workList-buttons_text">工序分类</text>-->
								<!--								<text class="workList-buttons_text">工序号</text>-->
								<text class="workList-buttons_text">工序名</text>
								<text class="workList-buttons_text">工序工价</text>

							</view>


							<scroll-view class="uni-scoller-box" enableBackToTop="true" scroll-y>


								<view class="list_box_out">
									<view class="list-box" v-for="(item,index) in workList" :key="index"
										@click="clickItem(item,index)">
										<!-- 标题 -->
										<view class="list-box" v-if="index%2==0">


											<text class="contentListItemLeftImgText" v-if="item.checked==false"></text>
											<image class="contentListItemLeftImg" v-if="item.checked==true"
												src="../../../static/xuanzhong.png" mode="scaleToFill"></image>

											<text class="workList-buttons_text_1">{{ item.processName }}</text>
											<text class="workList-buttons_text_1">{{ item.wages }}</text>

										</view>


										<view class="list-box1" v-if="index%2!=0">
											<text class="contentListItemLeftImgText" v-if="item.checked==false"></text>
											<image class="contentListItemLeftImg" v-if="item.checked==true"
												src="../../../static/xuanzhong.png" mode="scaleToFill"></image>
											<text class="workList-buttons_text_1">{{ item.processName }}</text>
											<text class="workList-buttons_text_1">{{ item.wages }}</text>

										</view>
										<!-- 内容 -->
									</view>
								</view>


							</scroll-view>
							<!-- 列表部分 -->
							<!-- 点击保存 -->
							<view class="content">

								<button @click="addClick()" style="color:#ffffff" class="login"
									type="default">{{login}}</button>
							</view>



						</view>



						<!-- 图片列表 -->
						<view class="contentImgOut" v-if="navIndex==1">

							<view class="contentImgOutInner">

								<scroll-view scroll-x="true" class="ContentScrollX">
									<view class="contentImg" v-for="(item,index) in imgArr">


										<image class="contentImg2" :src="apiUrl+item" mode=""></image>
										<view class="contentImgDeleteBg" @click="deleteImg(index)">
											<image class="contentImgDelete" src="../../../static/gongzuotai/delete.png"
												mode="">
											</image>
										</view>
									</view>

									<view class="contentImg" @click="chooseImage()" v-if="imgArr.length<1">

										<view class="contentImgAddBg">
											<image class="contentImgAdd" src="../../../static/gongzuotai/shangchuan.png"
												mode="">
											</image>
										</view>
									</view>

								</scroll-view>

							</view>
							<!-- 点击保存 -->
							<view class="content">

								<button @click="addClick()" style="color:#ffffff" class="login"
									type="default">{{login}}</button>
							</view>

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import {
		addNumberManager
	} from "@/pages/api/api.js";
  import config from "@/pages/api/config";

	export default {
		components: {
			MyNav,
			bgImage,
		},
		computed: {
			computedStyle() {
				return {
					color: this.isActive ? this.textColor : 'black',

				}
			}
		},
		data() {
			return {

				isAllSelected: true, // 是否全部被选中
				checkedList: [], // 默认选中的值
				// 有复选框的列表数据
				workList: [],
				// 切换选项卡
				isActive: true,
				textColor: '#0081FF',
				navIndex: 0,
				login: '保存',
				title: '新增款式',
				isback: true,

				scrollViewHeight: 0,
				listData: [{
						title: '款号',
						Value: '',
						tableFie: 'itemCode',
						type: 0
					},
					{
						title: '款名',
						Value: '',
						tableFie: 'itemName',
						type: 1
					},
					// {
					// 	title: '服装类型',
					// 	Value: '单杉',
					// 	type: 2
					// },
					{
						title: '单位',
						Value: '件',
						tableFie: 'unit',
						type: 1
					},
					{
						title: '颜色',
						Value: '',
						tableFie: 'colorstr',
						type: 2
					},
					{
						title: '尺码',
						Value: '',
						tableFie: 'sizestr',
						type: 2
					},
          {
            title: '工序总成本',
            Value: '0.00',
            tableFie: 'cost',
            type: 3
          },
					// {
					// 	title: '裁床单价(元)',
					// 	Value: '100',
					// 	type: 1
					// },
					// {
					// 	title: '工序分类',
					// 	Value: '常用',
					// 	type: 2
					// },
					// {
					// 	title: '仓库',
					// 	Value: '成品仓库',
					// 	type: 2
					// },
					// {
					// 	title: '日期',
					// 	Value: '2030-01-01',
					// 	type: 2
					// },
				],

				// 图片列表
				imgArr: [],
				storeId: '',
				tenantId: '',
				selectList: [],


				// 颜色选择回传数据
				listSizeData: [],
				//颜色 多个逗号隔开
				colorstr: '',
				colorIds: '',
				sizestr: '',
				sizeIds: '',
				sizeData: [],
				processData: [],

				selectAll: false,
        apiUrl: config.apiUrl
			}
		},

		onLoad() {
			// 在其他页面或组件中访问
			const app = getApp();
			this.storeId = app.globalData.storeId
			this.tenantId = app.globalData.tenantId
			this.scrollViewHeight = app.globalData.scrollViewHeight2
		},
		onShow() {
			var that = this
			uni.$on('globleEvent', function(res) {
				// console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
				that.listSizeData = res.listSizeData
				console.log('选择颜色返回数据', that.listSizeData) //  为 B 页面传过来的值
				// 移除监听事件
				uni.$off('globleEvent');
			})
			uni.$on('globleSizeEvent', function(res) {
				// console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
				that.sizeData = res.listSizeData
				console.log('选择尺码返回数据', that.sizeData) //  为 B 页面传过来的值
				// 移除监听事件
				uni.$off('globleSizeEvent');
			})
			uni.$on('globleProcessEvent', function(res) {
				// console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
				that.processData = res.listData
				console.log('选择尺码返回数据', that.processData) //  为 B 页面传过来的值
				// 移除监听事件
				uni.$off('globleProcessEvent');
			})
      this.processData.forEach(item=>{
        item.processPrice = item.wages
      })
			this.workList = [...this.workList, ...this.processData]

      let cost = 0;
      this.workList.forEach(item=>{
        cost = cost + item.processPrice;
      })

			let colors = []
			let cIds = []
			this.listSizeData.forEach((item, index) => {
				if (item.checked) {
					colors.push(item.colorName)
					cIds.push(item.id)
				}
			})
			this.colorstr = colors.join(',');
			this.colorIds = cIds.join(',');

			let sizes = []
			let sIds = []
			this.sizeData.forEach((item, index) => {
				if (item.checked) {
					sizes.push(item.sizeName)
					sIds.push(item.id)
				}
			})
			this.sizestr = sizes.join(',')
			this.sizeIds = sIds.join(',')

			// 重置颜色值
			this.listData.forEach(item => {
				if ('颜色' == item.title) {
					item.Value = this.colorstr
				}
				if ('尺码' == item.title) {
					item.Value = this.sizestr
				}
        if ('cost' == item.tableFie) {
          item.Value = cost
        }
			})


		},
		methods: {

			// 点击全选按键
			selectAllClick() {
				this.selectAll = !this.selectAll

				this.workList.forEach((item, index) => {


					if (this.selectAll) {
						item.checked = true
					} else {
						item.checked = false
					}

				})

			},

			// 点击子项事件
			clickItem(item, index) {

				this.deviceSelectNum = 0
				this.workList.forEach((item, itemIndex) => {

					if (index == itemIndex) {
						item.checked = !item.checked
					}

					if (item.checked == true) {
						this.deviceSelectNum = this.deviceSelectNum + 1
					}

				})

				if (this.workList.length == this.deviceSelectNum) {
					this.selectAll = true;
				} else {
					this.selectAll = false;
				}
			},

			parentMethod(data) {
				console.info('子传父值', data)
			},
			goUrl(data) {
				console.info('goUrl', data)
				if (data.title == '颜色') {
					let list = this.colorIds.split(",")
					let parmas = {
						storeId: this.storeId,
						tenantId: this.tenantId,
						selectList: list
					}
					uni.navigateTo({
						url: '/subPackA/colorManagement/colorSelect/colorListSelect?data=' + encodeURIComponent(JSON
							.stringify(parmas)),
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				if (data.title == '尺码') {
					let list = this.sizeIds.split(",")
					let parmas = {
						storeId: this.storeId,
						tenantId: this.tenantId,
						selectList: list
					}
					uni.navigateTo({
						url: '/subPack/sizeManagement/sizeSelect/sizeListSelect?data=' + encodeURIComponent(JSON
							.stringify(parmas)),
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			// 删除图片
			deleteImg(index) {
				// //删除操作 index数组中的下标，删除一个
				this.imgArr.splice(index, 1)

			},

			// 选择图片
			chooseImage() {
        let url = config.apiUrl
        console.log('url',url)
        let that = this
				uni.chooseImage({
					count: 1,
					// sizeType压缩图片
					sizeType: "compressed",
					success: (res) => {
						// this.imgArr = this.imgArr.concat(res.tempFilePaths);
            console.log('xxxxxxxxx',res)
            uni.uploadFile({
              url: url+'/common/upload',
              filePath: res.tempFilePaths[0],
              name: 'file',
              formData: {},
              header: {
                'Content-Type': 'multipart/form-data', // 对于文件上传，这个通常需要设置
                'Authorization': uni.getStorageSync('token') // 添加你的token头部参数
              },
              success: (res) =>{
                console.log('图片上传',res)
                let obj = JSON.parse(res.data);
                console.log('obj',obj)
                if(obj.code==200){
                  // img = obj.fileName
                  that.imgArr.push(obj.fileName);
                  console.log('imgArr',that.imgArr)
                }
              },
              fail: (error) =>{
                console.log('图片上传失败',error)
                uni.showToast({
                  title: '图片上传失败',
                  icon: 'none'
                });
              }
            })
					}
				})

			},

			// 选择工序
			updateData() {
				let list = this.workList
				let parmas = {
					storeId: this.storeId,
					tenantId: this.tenantId,
					selectList: list
				}
				uni.navigateTo({
					url: '/subPack/styleManagement/styleManagementSelect/styleManagementSelect?data=' +
						encodeURIComponent(JSON.stringify(parmas)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			removeProcess() {
				console.log('removeProcess')
				let list = []
				this.workList = this.workList.filter((item) => {
					return item.checked == false;
				});
        let cost = 0;
        this.workList.forEach(item=>{
          cost = cost + item.processPrice
        })
        this.listData.forEach(row=>{
          if(row.tableFie=='cost'){
            row.Value = cost
          }
        })
			},
			removeProcessAll() {
				this.workList = [];
        this.listData.forEach(row=>{
          if(row.tableFie=='cost'){
            row.Value = 0
          }
        })
			},
			SwitchClick() {
				this.isActive = !this.isActive;
				console.log('获取值', this.isActive);
			},
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				// console.log('点击返回');
			},
			// 获取编号输入框的值
			onInputAccount(index,e) {

				this.listData[index].Value=e.target.value
				// console.log('获取录入值',e.target.value,this.listData);


			},
			addClick() {
        let img = ''
        let url = config.apiUrl
        console.log('url',url)
        if(this.imgArr!=undefined&&this.imgArr.length>0){
          img = this.imgArr[0]
          /*uni.uploadFile({
            url: url+'/common/upload',
            filePath: this.imgArr[0],
            name: 'file',
            formData: {},
            header: {
              'Content-Type': 'multipart/form-data', // 对于文件上传，这个通常需要设置
              'Authorization': uni.getStorageSync('token') // 添加你的token头部参数
            },
            success: (res) =>{
              console.log('图片上传',res)
              let obj = JSON.parse(res.data);
              console.log('obj',obj)
              if(obj.code==200){
                img = obj.filename
              }
            },
            fail: (error) =>{
              console.log('图片上传失败',error)
              uni.showToast({
                title: '图片上传失败',
                icon: 'none'
              });
            }
          })*/
        }
				let data = {
					itemCode: '',
					itemName: '',
					unit: '',
					storeId: this.storeId,
					tenantId: this.tenantId,
					colorids: this.colorIds,
					colorstr: this.colorstr,
					sizeids: this.sizeIds,
					sizestr: this.sizestr,
          cost: 0,
					imgs: img,
					processList: this.workList
				}
				this.listData.forEach(item => {
					if (item.tableFie === 'itemCode') {
						data.itemCode = item.Value
					}
					if (item.tableFie === 'itemName') {
						data.itemName = item.Value
					}
					if (item.tableFie === 'unit') {
						data.unit = item.Value
					}
          if (item.tableFie === 'cost') {
            data.cost = item.Value
          }
				})
				addNumberManager(data).then(res => {
					if (res.code == 200) {
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2]; //上一个页面
						//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
						prevPage.setData({
							isRefresh: 1
						})
						this.backOnClick()
					}
					// 显示提示信息
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}).catch((err) => {
					console.log('新增失败', err);
				});
			},
		}
	}
</script>

<style lang="scss">
	.contentListItemLeftImgText {
		display: flex;
		width: 30rpx;
		height: 30rpx;

		border-radius: 50%;
		border: 2px solid #999999;
		color: #FFFFFF;
		background-color: #FFFFFF;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.contentListItemLeftImg {
		display: flex;
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}

	.all-check-box {
		width: 10%;
		height: 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.workList-buttons_text_1 {
		width: 22.5%;
		height: 100%;


		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #000000;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.workList-buttons_text {
		width: 22.5%;
		height: 100%;


		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;


	}

	.list_box_out {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex-direction: column;


	}

	.list-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex-direction: row;
		height: 80rpx;
		background: #EEEEEE;
	}

	.list-box1 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex-direction: row;
		height: 80rpx;
		background: #F9FCFF;
	}

	.workList-buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex-direction: row;

		margin-top: 30rpx;


		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}







	.listDataInnerBottomTextRed {

		width: 142rpx;
		height: 60rpx;
		background: #ECF5FD;
		border-radius: 16rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FF4E00;

		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.listDataInnerBottomTextBlack {
		width: 142rpx;
		height: 60rpx;
		background: #ECF5FD;
		border-radius: 16rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #0081FF;
		text-align: center;

		display: flex;
		align-items: center;
		justify-content: center;

	}

	.listDataInnerBottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: row;
		margin-top: 30rpx;
		width: 690rpx;


	}







	.login {
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
		margin-bottom: 30rpx;


		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}




	.head-nav {

		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #CCCCCC;
		width: 100%;

	}

	.head-nav-line {

		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		color: #CCCCCC;
		width: 100%;



	}

	.head-nav-line1 {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		color: #CCCCCC;
		width: 100%;



	}


	.white {
		margin-top: 30rpx;
		width: 50rpx;
		height: 4rpx;
		background: red;
		border-radius: 2rpx;
	}

	.line {
		margin-top: 24rpx;
		width: 80rpx;
		height: 8rpx;
		background: #0081FF;
		border-radius: 2rpx;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.activite {
		color: #0081FF;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;




	}

	.head-nav>view {
		padding-bottom: 10rpx;
	}

	.ContentScrollX {

		width: 666rpx;
		height: 250rpx;
		white-space: nowrap;
		// background-color: #0081FF;
	}


	.contentImg {
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		position: relative;

		display: inline-block;

		margin-left: 20rpx;
		margin-right: 20rpx;

		width: 190rpx;
		height: 190rpx;
		background: #F5F7F9;
		// background: red;
		border-radius: 20rpx;

		.contentImg2 {
			display: flex;
			justify-content: center;
			flex-direction: row;
			align-items: center;
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			display: inline-block;




			width: 150rpx;
			height: 150rpx;

			border-radius: 20rpx;

		}

		.contentImgAddBg {
			width: 50rpx;
			height: 50rpx;

			border-radius: 20rpx;

			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 75rpx;
			left: 75rpx;

			.contentImgAdd {
				width: 40rpx;
				height: 40rpx;



			}
		}

		.contentImgDeleteBg {
			width: 50rpx;
			height: 50rpx;
			background: #FF4E00;
			border-radius: 20rpx;

			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 0rpx;
			right: 0rpx;

			.contentImgDelete {
				width: 30rpx;
				height: 30rpx;



			}


		}
	}


	.contentImgBg {
		width: 190rpx;
		height: 190rpx;
		background: #000000;
		border-radius: 20rpx;
		position: relative;


	}


	.contentImgOutInner {
		height: 100%;

		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;

		margin-top: 30rpx;
	}

	.contentImgOut {
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 100%;

		margin-top: 30rpx;

	}

	.content {
		/* background: #008000; */
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}



	.SwitchTabOutInnerRight {
		background-color: aqua;
		width: 100%;
		height: 100rpx;
	}

	.SwitchTabOutInnerLeft {
		background: #0081FF;
		width: 100%;
		height: 100rpx;
	}

	.SwitchTabOutInnerTopRigthLine {
		width: 50rpx;
		height: 4rpx;
		background: #0081FF;
		border-radius: 2rpx;
	}

	.SwitchTabOutInnerTopRigthText {
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		line-height: 120rpx;
	}

	.SwitchTabOutInnerTopRigth {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.SwitchTabOutInnerTopLeft {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.SwitchTabOutInnerTop {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
	}

	.SwitchTabOutInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.SwitchTabOut {

		display: flex;
		justify-content: center;
		align-items: center;

		background: #FFFFFF;
		border-radius: 30rpx;

		margin-top: 30rpx;

	}






	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;

		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/


	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;


		/* background-color: aqua; */
	}



	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}


	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItem {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;

		border-radius: 30rpx 30rpx 0 0;
		/* background-color: aqua; */

	}


	.contentItem4 {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* background-color: bisque; */
	}

	.labelContent {
		font-size: 20rpx;
		font-weight: 600;
	}

	.contentItem3 {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		width: 100%;
		height: 120rpx;

	}

	.listContent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 690rpx;

		background: #FFFFFF;

	}

	.lineBg {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;
	}


	.ContentScroll {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;


		width: 750rpx;

		height: 1100rpx;

		border-radius: 30rpx;
	}

	.ContentScrollInner {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;


		width: 750rpx;


	}
</style>
